<template>
  <div>
    <div style="font-size: 20px; color: #333333;text-align: center;margin-top: -30px;margin-bottom: 30px;">
      手机号绑定
    </div>
    <div style="padding: 0 20px">
      <el-input v-model="phone" placeholder="请输入手机号码" @input="(v)=>(phone=v.replace(/[^\d]/g,''))" >
            <el-button slot="append" @click="sendCode" :disabled="isSending || countdown > 0">
                {{ isSending ? '发送中...' : countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
              </el-button>
      </el-input>
      <el-input v-model="code" placeholder="请输入验证码" @input="(v)=>(code=v.replace(/[^\d]/g,''))" style="margin-top: 30px" />
      <div class="btnRR" @click="bindPhone">立即绑定</div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "bindPhone",
    props: {},
    data() {
      return {
        phone: '',
        code: '',
        isSending: false,
        countdown: 0,
        smsToken: '',
      };
    },

    mounted() {

    },

    watch: {

    },
    computed: {

    },
    methods: {
      sendCode() {
        if (!this.phone) {
          this.$message('请输入手机号码')
          return;
        }
        if (this.countdown > 0 || this.isSending) {
          return; // 防止重复点击发送
        }
        // 假设在这个方法中实现发送验证码的逻辑
        // 可以调用sendVerificationCode()方法发送验证码
        // 这里只是简单模拟发送过程
        this.isSending = true;
        this.startCountdown();
        // setTimeout(() => {
        //   // 假设发送成功后将isSending重置为false
        //   this.isSending = false;
        // }, 2000); // 这里使用2秒的延迟来模拟发送过程，你需要替换为实际的发送逻辑
        this.sendSmsCode()
      },
      startCountdown() {
        this.countdown = 60;
        const timer = setInterval(() => {
          this.countdown--;
          if (this.countdown <= 0) {
            clearInterval(timer);
          }
        }, 1000);
      },

      async sendSmsCode() {
        let res = await this.$API.system.sendSmsCode({
          phone: this.phone
        })
        if (res.code == 200) {
          this.smsToken = res.data.smsToken;
          this.isSending = false;
          this.$message.success('验证码已发送，请注意查收')
        } else {
          this.$message.error(res.msg)
        }
      },
      async bindPhone() {
        if (!this.phone) {
          this.$message('请输入手机号码')
          return;
        }
        if (!this.code) {
          this.$message('请输入验证码')
          return;
        }
        let res = await this.$API.system.bindPhone({
          phone: this.phone,
          smsCode: this.code,
          smsToken: this.smsToken
        })
        if (res.code == 200) {
          this.$message.success('绑定成功')
          this.$emit("successPay");
        } else {
          this.$message.error(res.msg)
        }
      }
    },
    created() {},
  };
</script>
<style lang="scss" scoped>
  .btnRR {
    margin-top: 40px;
    // width: 300px;
    width: 100%;
    height: 46px;
    border-radius: 5px;
    background: rgba(255, 104, 178, 0.698);

    font-size: 18px;
    color: #FFFFFF;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .flex-column {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
</style>
